import React from 'react';
import {Button, Container, Content, Footer, FooterTab, Icon, Root, Text} from 'native-base';
import {StackNavigator, TabNavigator} from "react-navigation";
import HomeScreen from "./app/pages/HomeScreen";
import TianScreen from "./app/pages/TianScreen";
import MsgScreen from "./app/pages/MsgScreen";
import MeScreen from "./app/pages/MeScreen";

const AppTabNavigator = TabNavigator({
    Home: {
        screen: HomeScreen,
    },
    Tian: {
        screen: TianScreen,
    },
    Msg: {
        screen: MsgScreen,
    },
    Me: {
        screen: MeScreen,
    },
}, {
    tabBarPosition: 'bottom',
    tabBarComponent: props => {
        return (
            <Footer>
                <FooterTab>
                    <Button
                        vertical
                        active={props.navigationState.index === 0}
                        onPress={() => props.navigation.navigate('Home')}>
                        <Icon name="home"/>
                        <Text>首页</Text>
                    </Button>
                    <Button
                        vertical
                        active={props.navigationState.index === 1}
                        onPress={() => props.navigation.navigate('Tian')}>
                        <Icon name="document"/>
                        <Text>提案</Text>
                    </Button>
                    <Button
                        vertical
                        active={props.navigationState.index === 2}
                        onPress={() => props.navigation.navigate('Msg')}>
                        <Icon name="chatboxes"/>
                        <Text>消息</Text>
                    </Button>
                    <Button
                        vertical
                        active={props.navigationState.index === 3}
                        onPress={() => props.navigation.navigate('Me')}>
                        <Icon name="person"/>
                        <Text>我的</Text>
                    </Button>
                </FooterTab>
            </Footer>
        );
    }
});

const AppStackNavigator = StackNavigator({
    Root: {
        screen: AppTabNavigator,
        navigationOptions: {
            header: null,
        },
    },
    /*List: {
        screen: ListScreen,
        navigationOptions: ({navigation}) => ({
            title: navigation.state.params.title,
        }),
    },
    Detail: {
        screen: DetailScreen,
        navigationOptions: ({navigation}) => ({
            title: navigation.state.params.title,
        }),
    }*/
    /*Toilet: {
        screen: ToiletScreen,
    },
    Reading: {
        screen: ReadingScreen,
    }*/
});

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isReady: false,
        };
    }

    async componentWillMount() {
        await Expo.Font.loadAsync({
            Roboto: require("native-base/Fonts/Roboto.ttf"),
            Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
            Ionicons: require("native-base/Fonts/Ionicons.ttf")
        });
        this.setState({isReady: true});
    }

    render() {
        if (this.state.isReady) {
            return (
                <Root>
                    <AppStackNavigator/>
                </Root>
            );
        } else {
            return <Expo.AppLoading/>;
        }

    }
}
